<!--
 * 输入框组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module title="基础使用">
			<pure-input v-model="v1" placeholder="基础使用"></pure-input>
		</app-demo-module>

		<!-- 数字类型 -->
		<app-demo-module title="数字类型">
			<pure-input
				v-model="v2"
				type="number"
				placeholder="数字类型"
			></pure-input>
		</app-demo-module>

		<!-- 前置图标 -->
		<app-demo-module title="前置图标">
			<pure-input
				v-model="v3"
				placeholder="前置图标"
				frontIconName="__saoma"
			></pure-input>
		</app-demo-module>

		<!-- 后置图标 -->
		<app-demo-module title="后置图标">
			<pure-input
				v-model="v4"
				placeholder="后置图标"
				frontIconName="__saoma"
				afterIconName="__weizhi"
			></pure-input>
		</app-demo-module>

		<!-- 可清空 -->
		<app-demo-module title="可清空">
			<pure-input
				v-model="v5"
				placeholder="可清空"
				frontIconName="__saoma"
				afterIconName="__weizhi"
				clearable
			></pure-input>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 值
const v1 = ref("");
const v2 = ref();
const v3 = ref("");
const v4 = ref("");
const v5 = ref("");
</script>

<style scoped lang="scss"></style>
